Unit 4: HTML & Structure Web Page 


Introduction to HTML 


HTML stands for Hyper Text Markup Language, which is 
the most widely used language on Web to develop web 
pages. HTML was created by Berners-Lee in late 1991 but 
“HTML 2.0° was the first standard HTML specification which 
was published in 1995. HTML 4.01 was a major version of HTML 
and it was published in late 1999. Though HTML 4.01 version is 
widely used but currently we are having HTML-5 version which 
is an extension to HTML 4.01, and this version was published in 
2012. 


e Hyper textrefers to the way in which Web pages (HTML 
documents) are linked together. Thus, the link available on a 
webpage is called Hypertext. 


- As its name suggests, HTML is a Markup Language which 
means you use HTML to simply "mark-up" a text document 
with tags that tell a Web browser how to structure it to 
display. 


Structure of HTML Page 


A typical HTML document will have the following structure — 


<!DOCTYPE html> 
<html> 


<head> 
Document header related tags 
</head> 


<body> 
Document body related tags 
</body> 


</html> 




















<!DOCTYPE...> 
This tag defines the document type and HTML version. 
<html> 


This tag encloses the complete HTML document and mainly comprises of document header 
which is represented by <head>...</head> and document body which is represented by 
<body>...</body> tags. 


<head> 


This tag represents the document's header which can keep other HTML tags like <title>, <link> 
etc. 


<title> 
The <title> tag is used inside the <head> tag to mention the document title. 
<body> 


This tag represents the document's body which keeps other HTML tags like <h1>, <div>, <p> 
etc. 


HTML Comments 


Comment is a piece of code which is ignored by any web browser. It is a good practice to 
add comments into your HTML code, especially in complex documents, to indicate sections of a 
document, and any other notes to anyone looking at the code. Comments help you and others 
understand your code and increases code readability. 


HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... -- 
> tags will be treated as comment and will be completely ignored by the browser. 


Valid vs Invalid Comments 


Comments do not nest which means a comment cannot be put inside another 
comment. Second the double-dash sequence "--" may not appear inside a comment except as 
part of the closing --> tag. You must also make sure that there are no spaces in the start-of 
comment string. 


<!DOCTYPE htmla 
<n> 


<head> 
Rt#tle>Walid @émment Example</title> 
</head> 


£bodYy> 


<!-- This is valid comment --> 
< !-- This is not a valid comment --> 


<p>Daeument content goes here 
</body> 


</html> 





Multiline Comments 


You can comment multiple lines by the special beginning tag <!-- and ending tag --> 
placed before the first line and end of the last line as shown in the given example below. 


<!IMOCTYPE html> 
Khtml> 


<head> 
<t 1 WWS>Multiline Comments le> 
K /héad> 


Thiis ammultiline comment andas emee 
span through as many as lines you like. 
==> 


<PrBoCument content JOes=hexe 
</body> 





</html> 


HTML Elements 


An HTML element is defined by a starting tag. If the element contains other content, it 
ends with a closing tag, where the element name is preceded by a forward slash as shown 
below with few tags — 


Start Tag Content End Tag 
<p> This is paragraph content. </p> 
<h1> This is heading content. </h1> 
<div> This is division content. </div> 
<br /> 


So here <p>....</p>is an HTML element, <h1>...</h1> is another HTML element. There are 
some HTML elements which don't need to be closed, such as <img.../>, <hr /> and <br /> 
elements. These are known as void elements. 


HTML documents consists of a tree of these elements and they specify how HTML documents 
should be built, and what kind of content should be placed in what part of an HTML document. 


Nested HTML Elements 


It is very much allowed to keep one HTML element inside another HTML element — 


Example 











P<IDOCTYPE html> 
Mian > 


<head> 
“eet he>Nested Elements Example</titles> 
</head> 


<body> 
<hi>This is "Mis | TOS heading<ArtT> 
<p>This is <u>un co > 
</body> 


[</html> | 


HTML Attributes 


An attribute is used to define the characteristics of an HTML element and is placed 
inside the element's opening tag. All attributes are made up of two parts — a name and a value 


e Thenameis the property you want to set. For example, the paragraph <p> element in 
the example carries an attribute whose name is align, which you can use to indicate the 
alignment of paragraph on the page. 


e The value is what you want the value of the property to be set and always put within 
quotations. The below example shows three possible values of align attribute: left, 
center and right. 


Attribute names and attribute values are case-insensitive. 


Example 


<!DOCTYPE html> 
<hi ml> 


<head> 


<title>Align Attribute Example</title> 
</head> 


<body> 
<pika lign "left">This is left aligned</p> 
<p align "center">This is center aligned</p> 
<p Gaon = "right">This ¡BMoht aligned</p> 
</body> 





<a h tr > 


This will display the following result — 


Core Attributes 


The four core attributes that can be used on the majority of HTML elements (although not all) 
are - 


e Class 


e Style 


The Id Attribute 


The id attribute of an HTML tag can be used to uniquely identify any element within an HTML 
page. There are two primary reasons that you might want to use an id attribute on an element 


If an element carries an id attribute as a unique identifier, it is possible to identify just 
that element and its content. 


e lf you have two elements of the same name within a Web page (or style sheet), you can 
use the id attribute to distinguish between elements that have the same name. 


We will discuss style sheet in separate tutorial. For now, let's use the id attribute to distinguish 
between two paragraph elements as shown below. 


Example 


<p id = "html">This para explains what is HTML</p> 
<p id = "css">This para explains what is Cascading Style Sheet</p> 


The title Attribute 


The title attribute gives a suggested title for the element. They syntax for the title attribute is 
similar as explained for id attribute — 


The behavior of this attribute will depend upon the element that carries it, although it is often 
displayed as a tooltip when cursor comes over the element or while the element is loading. 


Example 
































<!DOCTYPE html> 
| 4html> 














<head> 


<title>Bhe title Attribute Exampole</title> 
</head> 

















<body> 


<h3 title = "Hello ATML!">Titled Heading Tag Example</h3> 
</body> 





</html> 





























Now try to bring your cursor over "Titled Heading Tag Example" and you will see that whatever 
title you used in your code is coming out as a tooltip of the cursor. 


The class Attribute 


The class attribute is mostly used to point to a class in a style sheet. However, it can also be 
used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified 


class. 


The class attribute specifies one or more class names for an element. The value of the 
attribute may also be a space-separated list of class names. For example — 


class = "classNamel className2 className3" 


The style Attribute 


The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element. 
































Do TYPE A | 
<hti > 





<head> 
<tit Ie le Attribute</title> 
</head> 


<body> 
<p styles"font-tamlytarial? cofor:fFEOOCOO;" AMES... .</pr 


</body> 







































































HTML Headings (<head>) 


The <head> tag is a container of various important tags like <title>, <meta>, <link>, 


<base>, <style> and <script>tags. 


e The HTML <title> tag is used for specifying the title of the HTML document. 

e The HTML <meta> tag is used to provide metadata about the HTML document which 
includes information about page expiry, page author, list of keywords, page description 
etc. 

e The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, 
which means all the other URLs will be concatenated into base URL while locating for 


the given item. 


e The HTML <link> tag is used to specify relationships between the current document and 
external resource. 


e The HTML <style> tag is used to specify style sheet for the current HTML document. 


e The HTML <script> tag is used iclude either external script file or to define internal 
script for the HTMI 3 





Example: 


<!DOCTYPE html> 
6 9 on 


<head> ee 
<title>HIML wie Tag E mple</ti tle> 
para tipos 


"i 


= "keywords" co: 
c5 ywords 


meta nam 
E fn. 
es e descripti 


Phttps://www.sdjic.org/" /> 
a "stylesheet" Mpe = text esa" 
fl "/cssfBtylg s"> 
y <s oe = "text/css"? 
iss { 
Eground=colLor* 
king: 10px; 


</style> 
<script Vp 
funct rem 
alert ("Hello, 
} 
<A Seript> 


« /head> 


<lip dy ; 
“<a href = "/html/index.htm" title = "SDJIC"/>Welcome To © 
SDmEC<he> i 
y <input type = "button" onclick = "Hello();" name = "o values 
= "OR" € | 





Text Formatting Tags 
<b> <strong>: 


Anything that appears within <b>...</b> and <strong>...</strong> element, is displayed 
in bold. 


<i>: 

Anything that appears within <i>...</i> element is displayed in italicized. 
<u>: 

Anything that appears within <u>...</u> element, is displayed with underline. 
<strike>: 


Anything that appears within <strike>...</strike> element is displayed with 
strikethrough, which is a thin line through the text. 


<sup>: 


The content of a <sup>...</sup> element is written in superscript; the font size used is 
the same size as the characters surrounding it but is displayed half a character's height above 
the other characters. 


<sub>: 


The content of a <sub>...</sub> element is written in subscript; the font size used is the 
same as the characters surrounding it, but is displayed half a character's height beneath the 
other characters. 


<ins>: 

Anything that appears within <ins>...</ins> element is displayed as inserted text. 
<del>: 

Anything that appears within <del>...</del> element, is displayed as deleted text. 
<em>: 


The <em> tag is used to define emphasized text. The content inside is typically displayed 
in italic. 


<mark>: 






The <mark> tag defines text that should be marked or highlighted. 
<small>: 


The content of the <smal 






isplayed one font size smaller than 
the rest of the text surre j 
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<big>: a 
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